<template>
  <div id="echarts2"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts2()
  },
  created() {},
  methods: {
    showEcharts2() {
      let myChart = this.$echarts.init(document.getElementById('echarts2'))
      this.regList = this.data
      let date = [],
        qy = []
      date = this.regList.map((tag) => tag.year)
      qy = this.regList.map((tag) => tag.num)
      const color = ['#EAEA26', '#906BF9', '#FE5656', '#01E17E', '#3DD1F9', '#FFAD05'] //2个以上的series就需要用到color数组
      const legend = {
        //data，就是取得每个series里面的name属性。
        orient: 'horizontal',
        icon: 'circle', //图例形状
        padding: 0,
        top: 15,
        right: 50,
        itemWidth: 6, //小圆点宽度
        itemHeight: 6, // 小圆点高度
        itemGap: 11, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
          fontSize: 12,
          color: '#ffffff',
        },
      }
      const tooltip = {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      }
      let seriesData = [{ name: '', data: qy }]
      const commonConfigFn = (index) => {
        return {
          type: 'line',
          smooth: true,
          symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
          symbolSize: 6, //小圆点大小
          itemStyle: {
            //还是小圆点设置
          },
          label: {
            //显示小圆点上的label文字
            normal: {
              show: true,
              position: 'top',
              // offset: [0, 2],
              // distance: 30,
              textStyle: {
                color: '#fff',
                fontSize: 12,
              },
              formatter: function (a) {
                return `${a.value}`
              },
            },
          },
          lineStyle: {
            width: 1, //线条设置
          },
          areaStyle: {
            //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
            opacity: 0.2,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: color[index], // 上处的颜色
                },
                {
                  offset: 1,
                  color: 'transparent', // 下处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        }
      }
      seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }))
      let option = {
        color,
        // title,
        tooltip,
        legend,
        grid: {
          top: '10%',
          left: '1%',
          right: '4%',
          bottom: '8%',
          containLabel: true,
        },

        xAxis: {
          show: true, //显示x轴+x轴label文字
          type: 'category',
          boundaryGap: false, //从Y轴出发，这个false很好的
          axisLine: {
            show: true, //显示x坐标轴轴线
            lineStyle: {
              color: 'rgba(255,255,255,.4)',
            },
          },
          axisTick: {
            show: false, //不显示x坐标1cm刻度
          },
          axisLabel: {
            // color: '#ffffff', //x轴label文字颜色
            interval: 0, //这个一定要有，别忘记了
            rotate: 15,
            textStyle: {
              color: '#fff',
              fontSize: 10,
            },
          },
          splitLine: {
            show: false, //不显示grid竖向分割线
          },

          data: date,
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#ffffff',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.4)',
            },
          },
          splitLine: {
            show: false, //不显示grid水平分割线
          },
        },
        series: seriesData,
      }

      myChart.setOption(option)
    },
  },
}
</script>
